// 全局状态文件
// 导入创建全局状态的方法
import { createStore } from 'vuex'

// 通过导入的方法创建一个 store 实例
const store = createStore({
    // 添加严格模式
    // strict: true,
    state() {
        return {
            // count 就是我们的全局数据
            count: localStorage.getItem('count') || 100,
            // 放用户登录成功之后的数据
            userInfo: JSON.parse(localStorage.getItem('userInfo') || '{}')
        }
    },
    // 这里是唯一修改数据的地方，只要修改 state 中的内容，必须在这里进行
    mutations: {
        add(state) {
            state.count++
            // 本地存储一份
            localStorage.setItem('count', state.count)
        },
        addNum(state, num) {
            // 这里不能使用异步
            // setTimeout(() => {
            state.count += num
            // }, 1000)

            // 本地存储一份
            localStorage.setItem('count', state.count)
        },
        changeUserInfo(state, user) {
            state.userInfo = user
            // 因为全局状态在刷新页面的时候会导致数据丢失所以我们需要在本地存储一份
            localStorage.setItem('userInfo', JSON.stringify(user))
        }
    },
    actions: {
        addNumAction(context, num) {
            setTimeout(() => {
                // 所谓的一部，同样需要调用 commit 的修改方法，只是我们
                // 在修改之前先做了异步操作。所有的修改都要通过 mutations
                context.commit('addNum', num)
            }, 1000)
        }
    },
    // 全局状态的计算属性
    getters: {

    },
    // 状态模块
    modules: {

    }
    // 全局状态在页面刷新之后会导致数据丢失，此问题该如何解决
    // 1. 自己手动在本地存储一份
    // 2. 使用插件帮我们自动存储一份

})




// 导出创建好的 store 实例
export default store